<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>教练详情|私教预约系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="yinqi" />
</head>
<body>
<div class="teacher">
    <div class="teacherimg1">
        <img class="teacherimg" id="inputTrainerImage" alt="图片加载失败">
    </div>
    <div class="detail">
        <div style="font-weight: bold;font-size: 18px" id="inputTrainerName"></div>
        <div style="line-height: 25px" id="inputTrainerAge"></div>
        <div style="line-height: 25px" id="inputTrainerSex"></div>
        <div style="line-height: 25px" id="inputTrainerOnJobDate"></div>
        <div style="line-height: 25px" id="inputTrainerExperience"></div>
        <div style="line-height: 25px" id="inputTrainerPhone"></div>
        <div style="line-height: 25px" id="inputTrainerMind"></div>
    </div>

</div>
<div class="course">
    <div class="d_left">
        <div class="d_left_title">
            <div class="courseintro">
                主讲课程
            </div>
        </div>
        <div class="d_left_main">
            <div class="onecourse">
                <img style="height: 180px;width: 240px" alt="无" id="firstCourseImageOfCurrentTrainer" onclick="goTrainerFirstCourse()">
                <div class="img_title" id="firstCourseNameOfCurrentTrainer" ></div>
                <div class="img_people" id="firstCourseStudentOfCurrentTrainer" ></div>
            </div>
            <div>&ensp;</div>
            <div class="onecourse">
                <img style="height: 180px;width: 240px" alt="无" id="secondCourseImageOfCurrentTrainer" onclick="goTrainerSecondCourse()">
                <div class="img_title" id="secondCourseNameOfCurrentTrainer"></div>
                <div class="img_people" id="secondCourseStudentOfCurrentTrainer"></div>
            </div>
            <div>&ensp;</div>
            <div class="onecourse">
                <img  style="height: 180px;width: 240px" alt="无" id="thirdCourseImageOfCurrentTrainer" onclick="goTrainerThirdCourse()">
                <div class="img_title" id="thirdCourseNameOfCurrentTrainer"></div>
                <div class="img_people" id="thirdCourseStudentOfCurrentTrainer"></div>
            </div>
        </div>
    </div>
    <div class="d_right">
        <div class="d_rightup">
            最热课程
        </div>
        <div class="d_rightdown">
            <span style="line-height: 25px" class="link1" id="inputFirstHotClass" href="#" onclick="goFirstHotCourseDetail()"></span>
            <p></p>
            <span style="line-height: 25px" class="link1" id="inputSecondHotClass" href="#" onclick="goSecondHotCourseDetail()"></span>
            <p></p>
            <span style="line-height: 25px" class="link1" id="inputThirdHotClass" href="#" onclick="goThirdHotCourseDetail()"></span>

        </div>
    </div>
</div>
<input type="hidden" id="firstHotClassId">
<input type="hidden" id="secondHotClassId">
<input type="hidden" id="thirdHotClassId">
<input type="hidden" id="firstClassIdOfCurrentTrainer">
<input type="hidden" id="secondClassIdOfCurrentTrainer">
<input type="hidden" id="thirdClassIdOfCurrentTrainer">

<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){

        let currentTrainerPhone = $.cookie("currentTrainerPhone");

        jQuery.post("/getTrainerInfoByPhone", {"trainerPhone": currentTrainerPhone}, function(rst) {

            let imagePath = rst.trainerImage;
            $("#inputTrainerImage").attr('src', imagePath);

            $("#inputTrainerName").text("姓名：" + rst.trainerName);

            $("#inputTrainerAge").text("性别：" + rst.trainerAge);

            $("#inputTrainerSex").text("年龄：" + rst.trainerSex);

            $("#inputTrainerOnJobDate").text("上任时间：" + rst.trainerOnJobTime);

            $("#inputTrainerExperience").text("执教经验：" + rst.trainerExperience + "年");

            $("#inputTrainerPhone").text("联系电话：" + rst.trainerPhone);

            $("#inputTrainerMind").text("教学理念：" + rst.trainerPhilosophy);
        })

        jQuery.post("/getCourseListOrderByHot",function(rst){//处理响应的结果
            let num = rst.length;
            if(num > 0){
                let firstCourse = rst[0];
                $("#inputFirstHotClass").html("NO1：" + firstCourse.courseName);
                $("#firstHotClassId").val(firstCourse.courseId);
            }
            if(num > 1){
                let secondCourse = rst[1];
                $("#inputSecondHotClass").html("NO2：" + secondCourse.courseName);
                $("#secondHotClassId").val(secondCourse.courseId);
            }
            if(num > 2){
                let thirdCourse = rst[2];
                $("#inputThirdHotClass").html("NO3：" + thirdCourse.courseName);
                $("#thirdHotClassId").val(thirdCourse.courseId);
            }
        },"json");//表示返回数据的格式



        jQuery.post("/getCourseListByTrainerPhone", {"trainerPhone": currentTrainerPhone}, function (rst){

            let num = rst.length;

            if(num > 0){
                let firstCourse = rst[0];
                $("#firstCourseImageOfCurrentTrainer").attr('src', firstCourse.coursePhoto);
                $("#firstCourseNameOfCurrentTrainer").text(firstCourse.courseName);
                $("#firstCourseStudentOfCurrentTrainer").text("当前人数：" + firstCourse.courseStudents);
                $("#firstClassIdOfCurrentTrainer").val(firstCourse.courseId);
            }
            if(num > 1){
                let secondCourse = rst[1];
                $("#secondCourseImageOfCurrentTrainer").attr('src', secondCourse.coursePhoto);
                $("#secondCourseNameOfCurrentTrainer").text(secondCourse.courseName);
                $("#secondCourseStudentOfCurrentTrainer").text("当前人数：" + secondCourse.courseStudents);
                $("#secondClassIdOfCurrentTrainer").val(secondCourse.courseId);
            }
            if(num > 2){
                let thirdCourse = rst[2];

                $("#thirdCourseImageOfCurrentTrainer").attr('src', thirdCourse.coursePhoto);
                $("#thirdCourseNameOfCurrentTrainer").text(thirdCourse.courseName);
                $("#thirdCourseStudentOfCurrentTrainer").text("当前人数：" + thirdCourse.courseStudents);
                $("#thirdClassIdOfCurrentTrainer").val(thirdCourse.courseId);
            }
        })
    });
    function goFirstHotCourseDetail(){
        let id = $("#firstHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }
    function goSecondHotCourseDetail(){
        let id = $("#secondHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }
    function goThirdHotCourseDetail(){
        let id = $("#thirdHotClassId").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

    function goTrainerFirstCourse(){
        let id = $("#firstClassIdOfCurrentTrainer").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

    function goTrainerSecondCourse(){
        let id = $("#secondClassIdOfCurrentTrainer").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

    function goTrainerThirdCourse(){
        let id = $("#thirdClassIdOfCurrentTrainer").val();
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

</script>
</body>
<style type="text/css">
    .teacher{
        background: orange;
        width: 1200px;
        height: 220px;
        display: flex;
        flex-direction: row;
        padding: 0px 30px;

    }
    .teacherimg1{
        width: 150px;
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 30px
    }
    .teacherimg{

        width: 150px;
        height: 150px;
        border-radius: 50%;

    }
    .detail{
        padding: 25px 0;
        display:flex;
        flex-direction: column;
        color: white
    }
    .course{
        display: flex;
        flex-direction: row;
        margin: 20px 0;
    }
    .down{
        background: #f5f5f5;
        width:100%;
        height: 300px;
        display: flex;
        flex-direction: row;
        padding: 30px
    }
    .d_left{
        width: 890px;
        height: auto;
        background: white;
        margin: 5px 20px;
        display: flex;
        flex-direction: column;
    }
    .d_right{
        width: 250px;
        height: 180px;
        background: white;
        padding: 5px 20px
    }
    .d_left_title{
        border-bottom: solid 1px #e6e6e6;
        margin-top:10px;
        padding: 0 10px;
    }
    .courseintro{
        color: black;
        border-bottom: 2px solid dimgrey;
        font-size: 18px;
        width:80px;
        padding: 10px 10px;
        text-align: center;
    }
    .d_left_main{
        padding: 25px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .onecourse{
        height: 250px;
        width: 240px;
        cursor: pointer;
    }
    .img_title{
        padding: 8px 0
    }
    .img_people{
        text-align: right;
        font-size: 12px;
        padding: 5px 5px 0 0;
        color: rgb(153,153,153);
    }
    .courseintro{
        color: black;
        border-bottom: 2px solid rgb(250,98,15);
        font-size: 18px;
        width:80px;
        padding: 10px 10px;
        text-align: center;
    }
    .d_rightup{
        margin: 30px 15px 30px 15px;
        height: 24px;
        border-style: solid;
        border-color: rgb(250,98,15);
        border-width: 0px 0px 0px 4px;
        padding-left: 18px;
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 18px;
    }
    .link1{
        cursor: pointer;
    }
    .d_rightdown{
        display: flex;
        flex-direction: column;
        background: #f7f7f7;
        border-radius: 5px;
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 16px;
        color: deepskyblue;
        height: 150px;
        width: 280px;
        padding: 10px 8px;
        text-decoration: underline
    }
</style>
</html>